<template>
	<div
		class="image-card bg-white rounded-lg shadow-md overflow-hidden cursor-pointer w-40 h-52"
		:class="{
      'ring-2 ring-blue-500 ring-offset-2': selected
    }"
		@click="emit('select', image)"
		@mouseenter="isHovered = true"
		@mouseleave="isHovered = false"
	>
		<div class="image-container h-40 relative overflow-hidden">
			<img
				:src="image.url"
				:alt="image.name"
				class="w-full h-full object-cover transition-transform duration-300"
				:class="{'scale-105': isHovered}"
			>

			<!-- 遮罩层 -->
			<div
				class="absolute inset-0 bg-black bg-opacity-30 flex items-center flex-wrap justify-center gap-4 transition-opacity"
				:class="{'opacity-100': isHovered, 'opacity-0': !isHovered}"
			>
				<a-button shape="circle" @click.stop="eyeHandler" ghost :icon="h(EyeOutlined)" />
				<a-button shape="circle" @click.stop="editHandler" ghost :icon="h(EditOutlined)" />
				<a-button shape="circle" @click.stop="deleteHandler"  danger ghost :icon="h(DeleteOutlined)" />
<!--  				<a-button ghost @click="useHandler">使用</a-button>-->

			</div>
		</div>

		<div class="p-3">
			<h3 class="font-medium text-gray-800 truncate" :title="image.name">{{ image.name }}</h3>
		</div>
	</div>
</template>

<script setup>
import { ref, computed,h } from 'vue';
import {DeleteOutlined, EditOutlined, EyeOutlined, ScissorOutlined, SearchOutlined} from "@ant-design/icons-vue";


// 定义 props
const props = defineProps({
	image: {
		type: Object,
		required: true
	},
	selected: {
		type: Boolean,
		default: false
	}
});

// 定义事件
const emit = defineEmits(['select', 'edit', 'delete','eye','use' ]);

// 响应式状态
const isHovered = ref(false);

const editHandler = () => {
  emit('edit',props.image)
}


const deleteHandler = () => {
  emit('delete',props.image)
}

const eyeHandler = () => {
	emit('eye',props.image)

}
const useHandler = () => {
	emit('use',props.image)

}

</script>

<style scoped>
.image-card {
	transition: all 0.3s ease;
}

.image-container {
	position: relative;
	overflow: hidden;
}

</style>
